autohide: leave requires double tap on touch devices #285

itshallrun · 2020-12-02T16:59:46Z

Hey,

I am working on a cross plattform web app.
The issue is, on touch devices, the autoHide: "leave" option requires a double tap to trigger the touch event.
The first tap will show the scrollbar, and the second tap will actually trigger the touch event underneath.

touchSupport is active in my options.

                    resize: "none",
                    sizeAutoCapable: true,
                    paddingAbsolute: true,
                    scrollbars: {
                        visibility: "auto",
                        autoHide: "leave",
                        autoHideDelay: 400,
                        dragScrolling: true,
                        clickScrolling: false,
                        touchSupport: true,
                    },

Is there any way to have autoHide: "leave" for non-mobile devices and trigger the touch event on the first tap on mobile?

The text was updated successfully, but these errors were encountered:

KingSora · 2020-12-02T18:40:13Z

Good day! @itshallrun

With "trigger the touch event on the first tap" you mean the possibility to scroll, or the possibility to interact with the scrollbars?

itshallrun · 2020-12-02T18:46:23Z

I mean, if there are some elements in a scrollable container, then the first tap will show the scrollbars (which are hidden by default) and the second tap will trigger the onClick / touch event of the touched element.
So the scrollbars are kind of blocking the content from being triggered on the first tap.

KingSora · 2020-12-02T19:02:31Z

Alright.. The touched elements are they below the actual scrollbars, or does the position of the element doesn't matter?

What OS, device and browser are you using? Does this only happen with the autohide: leave option? Can you trigger it also on desktop devices somehow?

itshallrun · 2020-12-02T19:11:13Z

I am using the react version.
I could test it on an Ipad pro.
It is an issue for autohide:leave only.
The position doesn't matter.
Whenever I tap in the Scrollbars container, the first tap always triggers the visibility of the scrollbars.
On the desktop, the behavior is as desired. The scrollbars are hidden until the scrollbars container is hovered. And they disappear when the container is left.

KingSora · 2020-12-10T22:03:21Z

@itshallrun alright, I'll take a look into it as soon as I have time.. I don't have a iPad, so I'll need some time to find a way to reproduce it

beeteam368 · 2020-12-11T03:40:32Z

Hello KingSora,

Thanks for great library!

I tested it very thoroughly on the iPhone.

I confirm that this is a problem when using on iOS.

Please review and fix it when possible!

Best Regards!

KingSora · 2020-12-11T07:35:24Z

@beeteam368 I'll give my best :)

beeteam368 · 2020-12-14T02:48:01Z

@beeteam368 I'll give my best :)

Thanks! Wish you a good day!

theo-staizen · 2021-10-25T07:27:07Z

@KingSora hello mr king. is there any progress on this issue? this still occurs on iOS

KingSora · 2021-10-25T07:33:28Z

@theo-staizen I have it on my backlog, but I couldn't reproduce it until now.. is it possible to create an video or something like that?

theo-staizen · 2021-10-25T07:39:16Z

I'll get something to you asap (the page we have is under NDA, so I'm trying to make a clean example). Btw you should be able to request free browserstack access for this project: https://www.browserstack.com/open-source for you to be able to test on devices you dont own. it's better than nothing :)

KingSora · 2021-10-25T12:12:42Z

@theo-staizen thanks a lot! I've tried it with browserstack already (btw. huge thanks to them, many bugs could be only solved cause of that), but I still wasn't able to get the described problem..

theo-staizen · 2021-10-25T12:25:58Z

@KingSora I spent a bit more time setting it up a codesandbox, but the problem seems to be intermittent and only happens under these conditions:

Only happens under React, which makes me believe it is caused by React's synthetic events.
Only happens when the scroll container (or window) loses focus

I'll keep trying to get this consistently failing

KingSora · 2021-10-27T12:58:27Z

@theo-staizen thanks a lot! :)

KingSora · 2022-11-12T13:24:19Z

Can you please try v2 and confirm whether this issue still persists? :)

alvarolb · 2023-02-27T12:18:10Z

Yes, I confirm that the issue is still present on 2.1.0.

The first touch displays the current scroll, and the second lets you click on the link.

KingSora · 2023-02-27T15:21:16Z

@alvarolb thanks for the update, do you mind creating an minimal reproducable example with which I could try to solve the issue? :)

robwheatley · 2023-04-05T16:12:15Z

Hi there.
First off @KingSora - loving your work!

Just to add to this - I've also just hit the same problem and came across this page looking for a solution. My guess is that it's down to the fact that iOS doesn't like hovers. Anything with a hover effect on it needs a double tap in iOS, and I assume you have a hover somewhere looking for the mouse hover on auto hide.

Anyway - I hacked a work-around to get me going - at least for now. No idea if it's any good, but it only took 2 mins and it seems to work.

I installed react-device-detect (something I have used before) and then created a new component that uses the fact that you are on a mobile device to skip using OverlayScrollbars. The scrollbars do what I want them to do on iOS out of the box anyway.

Kinda like this:

import { isMobile } from 'react-device-detect';

function ScrollWrapper({ children }) {

  if (isMobile) {
    return children
  } else {
    return (
      <OverlayScrollbarsComponent
        options={{ scrollbars: { autoHide: 'leave', autoHideDelay: 500 } }}
      >
        {children}
      </OverlayScrollbarsComponent>
    )
  }
}

Once you have the above, replace where you had the OverlayScrollbarsComponent with ScrollWrapper in your original code.

I hope that makes sense.

KingSora · 2023-04-06T08:12:56Z

@robwheatley Thanks for posting your solution :)

Just for completeness I would like to add that this solution could cause problems with server side rendering

robwheatley · 2023-04-06T10:24:43Z

@KingSora Thanks for the heads-up. In my case, I don't need to worry as I'm not doing any SSR ;-). Worth noting though.

KingSora · 2023-09-17T10:03:09Z

This issue should be fixed in version v2.3.1.

Bumps [overlayscrollbars](https://github.com/KingSora/OverlayScrollbars/tree/HEAD/packages/overlayscrollbars) from 2.3.0 to 2.3.1. <details> <summary>Changelog</summary> <p><em>Sourced from <a href="https://github.com/KingSora/OverlayScrollbars/blob/master/packages/overlayscrollbars/CHANGELOG.md">overlayscrollbars's changelog</a>.</em></p> <blockquote> <h2>2.3.1</h2> <h3>Bug Fixes</h3> <ul> <li>Fix direction <code>rtl</code> visual scrollbar handle behavior in browser which support the <a href="https://developer.mozilla.org/en-US/docs/Web/API/ScrollTimeline">ScrollTimeline API</a>.</li> <li>Fix double tap behavior for interactive elements on <code>iOS</code> devices if <code>autoHide</code> is <code>leave</code> or <code>move</code>. <a href="https://github.com/KingSora/OverlayScrollbars/discussions/560">#560</a> <a href="https://github.com/KingSora/OverlayScrollbars/discussions/285">#285</a></li> <li>Fix incorrect scrollbar handle calculation when overscroll on safari occurred. <a href="https://github.com/KingSora/OverlayScrollbars/discussions/559">#559</a></li> </ul> </blockquote> </details> <details> <summary>Commits</summary> <ul> <li>See full diff in <a href="https://github.com/KingSora/OverlayScrollbars/commits/HEAD/packages/overlayscrollbars">compare view</a></li> </ul> </details> <br /> [![Dependabot compatibility score](https://dependabot-badges.githubapp.com/badges/compatibility_score?dependency-name=overlayscrollbars&package-manager=npm_and_yarn&previous-version=2.3.0&new-version=2.3.1)](https://docs.github.com/en/github/managing-security-vulnerabilities/about-dependabot-security-updates#about-compatibility-scores) Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting `@dependabot rebase`. [//]: # (dependabot-automerge-start) [//]: # (dependabot-automerge-end) --- <details> <summary>Dependabot commands and options</summary> <br /> You can trigger Dependabot actions by commenting on this PR: - `@dependabot rebase` will rebase this PR - `@dependabot recreate` will recreate this PR, overwriting any edits that have been made to it - `@dependabot merge` will merge this PR after your CI passes on it - `@dependabot squash and merge` will squash and merge this PR after your CI passes on it - `@dependabot cancel merge` will cancel a previously requested merge and block automerging - `@dependabot reopen` will reopen this PR if it is closed - `@dependabot close` will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually - `@dependabot show <dependency name> ignore conditions` will show all of the ignore conditions of the specified dependency - `@dependabot ignore this major version` will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself) - `@dependabot ignore this minor version` will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself) - `@dependabot ignore this dependency` will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself) </details> Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>

Bumps [overlayscrollbars](https://github.com/KingSora/OverlayScrollbars/tree/HEAD/packages/overlayscrollbars) from 2.3.0 to 2.3.1. <details> <summary>Changelog</summary> <p><em>Sourced from <a href="https://github.com/KingSora/OverlayScrollbars/blob/master/packages/overlayscrollbars/CHANGELOG.md">overlayscrollbars's changelog</a>.</em></p> <blockquote> <h2>2.3.1</h2> <h3>Bug Fixes</h3> <ul> <li>Fix direction <code>rtl</code> visual scrollbar handle behavior in browser which support the <a href="https://developer.mozilla.org/en-US/docs/Web/API/ScrollTimeline">ScrollTimeline API</a>.</li> <li>Fix double tap behavior for interactive elements on <code>iOS</code> devices if <code>autoHide</code> is <code>leave</code> or <code>move</code>. <a href="https://github.com/KingSora/OverlayScrollbars/discussions/560">#560</a> <a href="https://github.com/KingSora/OverlayScrollbars/discussions/285">#285</a></li> <li>Fix incorrect scrollbar handle calculation when overscroll on safari occurred. <a href="https://github.com/KingSora/OverlayScrollbars/discussions/559">#559</a></li> </ul> </blockquote> </details> <details> <summary>Commits</summary> <ul> <li>See full diff in <a href="https://github.com/KingSora/OverlayScrollbars/commits/HEAD/packages/overlayscrollbars">compare view</a></li> </ul> </details> <br /> <details> <summary>Most Recent Ignore Conditions Applied to This Pull Request</summary> | Dependency Name | Ignore Conditions | | --- | --- | | overlayscrollbars | [> 2.3.1] | </details> [![Dependabot compatibility score](https://dependabot-badges.githubapp.com/badges/compatibility_score?dependency-name=overlayscrollbars&package-manager=npm_and_yarn&previous-version=2.3.0&new-version=2.3.1)](https://docs.github.com/en/github/managing-security-vulnerabilities/about-dependabot-security-updates#about-compatibility-scores) Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting `@dependabot rebase`. [//]: # (dependabot-automerge-start) [//]: # (dependabot-automerge-end) --- <details> <summary>Dependabot commands and options</summary> <br /> You can trigger Dependabot actions by commenting on this PR: - `@dependabot rebase` will rebase this PR - `@dependabot recreate` will recreate this PR, overwriting any edits that have been made to it - `@dependabot merge` will merge this PR after your CI passes on it - `@dependabot squash and merge` will squash and merge this PR after your CI passes on it - `@dependabot cancel merge` will cancel a previously requested merge and block automerging - `@dependabot reopen` will reopen this PR if it is closed - `@dependabot close` will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually - `@dependabot show <dependency name> ignore conditions` will show all of the ignore conditions of the specified dependency - `@dependabot ignore this major version` will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself) - `@dependabot ignore this minor version` will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself) - `@dependabot ignore this dependency` will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself) </details> Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>

KingSora mentioned this issue Sep 17, 2023

Weird Double Tap Behaviour on Mobile IOS Devices #560

Closed

KingSora closed this as completed Sep 17, 2023

This was referenced Sep 18, 2023

Bump overlayscrollbars from 2.3.0 to 2.3.1 destinygg/chat-gui#334

Closed

Bump overlayscrollbars from 1.13.1 to 2.3.1 in /frontend maroux/firefly-iii#499

Closed

This was referenced Sep 19, 2023

Bump overlayscrollbars from 1.13.3 to 2.3.1 scotchadmins/YetiForceCRM#20

Closed

build(deps): Bump overlayscrollbars from 2.3.0 to 2.3.1 EasyPost/easy-ui#631

Merged

dependabot bot mentioned this issue Sep 20, 2023

build(deps): Bump overlayscrollbars from 2.3.0 to 2.3.1 EasyPost/easy-ui#636

Merged

This was referenced Sep 30, 2023

Bump overlayscrollbars from 1.13.3 to 2.3.2 xirgo4/YetiForceCRM#18

Closed

Bump overlayscrollbars from 1.13.1 to 2.3.2 erikjulios/ProjectManagementOffice_php#11

Closed

dependabot bot mentioned this issue Oct 30, 2023

Bump overlayscrollbars from 1.13.1 to 2.4.1 in /frontend maroux/firefly-iii#510

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

autohide: leave requires double tap on touch devices #285

autohide: leave requires double tap on touch devices #285

itshallrun commented Dec 2, 2020

KingSora commented Dec 2, 2020 •

edited

Loading

itshallrun commented Dec 2, 2020

KingSora commented Dec 2, 2020

itshallrun commented Dec 2, 2020

KingSora commented Dec 10, 2020

beeteam368 commented Dec 11, 2020

KingSora commented Dec 11, 2020

beeteam368 commented Dec 14, 2020

theo-staizen commented Oct 25, 2021

KingSora commented Oct 25, 2021

theo-staizen commented Oct 25, 2021 •

edited

Loading

KingSora commented Oct 25, 2021

theo-staizen commented Oct 25, 2021 •

edited

Loading

KingSora commented Oct 27, 2021

KingSora commented Nov 12, 2022

alvarolb commented Feb 27, 2023

KingSora commented Feb 27, 2023

robwheatley commented Apr 5, 2023

KingSora commented Apr 6, 2023

robwheatley commented Apr 6, 2023

KingSora commented Sep 17, 2023

autohide: leave requires double tap on touch devices #285

autohide: leave requires double tap on touch devices #285

Comments

itshallrun commented Dec 2, 2020

KingSora commented Dec 2, 2020 • edited Loading

itshallrun commented Dec 2, 2020

KingSora commented Dec 2, 2020

itshallrun commented Dec 2, 2020

KingSora commented Dec 10, 2020

beeteam368 commented Dec 11, 2020

KingSora commented Dec 11, 2020

beeteam368 commented Dec 14, 2020

theo-staizen commented Oct 25, 2021

KingSora commented Oct 25, 2021

theo-staizen commented Oct 25, 2021 • edited Loading

KingSora commented Oct 25, 2021

theo-staizen commented Oct 25, 2021 • edited Loading

KingSora commented Oct 27, 2021

KingSora commented Nov 12, 2022

alvarolb commented Feb 27, 2023

KingSora commented Feb 27, 2023

robwheatley commented Apr 5, 2023

KingSora commented Apr 6, 2023

robwheatley commented Apr 6, 2023

KingSora commented Sep 17, 2023

KingSora commented Dec 2, 2020 •

edited

Loading

theo-staizen commented Oct 25, 2021 •

edited

Loading

theo-staizen commented Oct 25, 2021 •

edited

Loading